<template>
    <div class="shelf-list-wrapper" :style="{top: shelfListTop}">
  <transition-group name="list" tag="div" id="shelf-list">
      <div
        class="shelf-list-item-wrapper"
        v-for="(item, index) in data"
        :key="index"
      >
        <shelf-item :data="item" :style="{ height: itemHigth }"></shelf-item>
        <div class="shelf-list-title-wrapper">
          <span class="shelf-list-title title-small">{{ item.title }}</span>
        </div>
      </div>
  </transition-group>
    </div>
</template>

<script>
import { storeShelfMixin } from '../../utils/mixin'
import shelfItem from './shelfItem.vue'
import { px2rem, realPx } from '../../utils/utils'
export default {
  mixins: [storeShelfMixin],
  props: {
    top: {
      type: Number,
      default: 94
    },
    data: {
      type: Array
    }
  },
  data() {
    return {
      list: []
    }
  },
  components: {
    shelfItem
  },
  methods: {},
  computed: {
    itemHigth() {
      // w / 250 = h / 350
      // h = w / 250 * 350
      // 屏幕宽度 / 3  再减去 padding  也就是每一个item
      // ((1200 - 160) / 3 / 250) * 350
      console.log(((window.innerWidth - realPx(120)) / 3 / 250) * 350 + 'px')
      return ((window.innerWidth - realPx(120)) / 3 / 250) * 350 + 'px'
    },
    // 动态top
    shelfListTop () {
      return px2rem(this.top) + 'rem'
    }
  },
  watch: {
    // 当点击取消按钮时 将所有selected = false
    isEditMode(isEditMode) {
      if (!isEditMode) {
        this.list.forEach((item) => {
          item.selected = false
        })
      }
    },
    // 点shelfFooter 组件中点击删除图书时 更新书架
    shelfList(shelfList) {
      this.list = shelfList
    }
  },
  mounted() {
    this.getShelfList()
  }
}
</script>

<style lang='scss' scopde>
@import '../../assets/style/global.scss';
.shelf-list-wrapper {
  position: absolute;
  top: px2rem(94);
  left: 0;
  z-index: 100;
  width: 100%;
  #shelf-list {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    padding: 0 px2rem(15) !important;
    box-sizing: border-box;
    .shelf-list-item-wrapper {
      flex: 0 0 33.33%;
      width: 33.33%;
      padding: px2rem(15);
      box-sizing: border-box;
      // 当产生变化的时候
      &.list-leave-active {
        display: none; // 正常情况display : flex 当离开时为none
      }
      &.list-move {
        transition: transform .5s;
      }
  }
    .shelf-list-title-wrapper {
      margin-top: px2rem(10);
      .shelf-list-title {
      }
    }
  }

}
</style>
